<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: <label>{{ count }}</label>
    <br />
    <button @click="addzhi(1)">值加1</button>
    <button @click="addzhi(5)">值加5</button>
    <button @click="set666(666)">两秒修改666</button>
    <p>{{ filteList }}</p>
    <hr />
    <p>{{ user.userinfo.username }}</p>
    <p>{{ userinfo }}</p>
    <p>{{ $store.getters["user/upper"] }}</p>
    <p>{{upper}}</p>
    <p></p>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "Son1Com",
  created() {},
  methods: {},
  computed: {
    ...mapState(["count", "user", "setting"]),
    ...mapState("user", ["userinfo"]),
    ...mapGetters(["filteList"]),
    ...mapGetters("user", ["upper"]),
  },
  methods: {
    ...mapMutations(["addcount"]),
    ...mapActions(["changeCountAction"]),
    addzhi(num1) {
      this.addcount(num1);
    },
    set666(num) {
      // this.$store.dispatch('changeCountAction',num)
      this.changeCountAction(num);
    },
  },
};
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>
